<!--
* @author wn
* @date 2024/04/10 10:52:44
* @description: 订单详情页
!-->
<template>
	<!-- 进度条 -->
	<view class="od-banner">
		<image
			src="/static/images/od_bg_icon.png"
			mode="widthFix"
			class="od-banner-icon"
		/>
		<view class="od-jd od-jd-0">
			<view class="od-jd-out">
				<view class="od-jd-in" :style="{ width: `${progressWidth}%` }"></view>
			</view>
			<view class="my-flex">
				<text
					class="od-jd-text"
					:class="{ 'od-jd-text-active': progressWidth === 25 }"
				>
					填写订单
				</text>
				<text
					class="od-jd-text"
					:class="{ 'od-jd-text-active': progressWidth === 50 }"
				>
					在线支付
				</text>
				<text
					class="od-jd-text"
					:class="{ 'od-jd-text-active': progressWidth === 75 }"
				>
					专人服务
				</text>
				<text
					class="od-jd-text"
					:class="{ 'od-jd-text-active': progressWidth === 100 }"
				>
					服务完成
				</text>
			</view>
		</view>
	</view>
	<!-- 订单状态 -->
	<view class="order-status">
		<!-- 待付款 -->
		<block v-if="progressWidth === 25">
			<view>
				<text class="od-st">订单待支付</text>
			</view>
			<view class="od-stt">
				请在
				<!-- 倒计时组件 -->
				<uni-countdown
					:second="orderDetail.order_start_time"
					color="#535353"
					splitor-color="#535353"
					:show-day="false"
					:show-colon="false"
					@timeup="onTimeUp"
					class="countdown"
				/>
				内完成支付，超时订单自动取消
			</view>
			<view class="od-op">
				<button class="btnp" @click="dopay">
					立即支付（{{ orderDetail.price }}元）
				</button>
			</view>
		</block>
		<!-- 进行中 -->
		<block v-if="progressWidth === 50">
			<block v-if="orderDetail.service_state == 0">
				<view><text class="od-st">正在为您安排服务专员...</text></view>
				<view class="od-stt">请保持手机畅通，稍后将有服务专员与您联系</view>
			</block>
			<block v-if="orderDetail.service_state == 1">
				<view><text class="od-st">服务进行中</text></view>
				<view class="od-stt">已安排服务专员，将于预约时间进行服务</view>
			</block>
		</block>
		<!-- 已完成 -->
		<block v-if="progressWidth === 75">
			<view><text class="od-st">服务已完成</text></view>
			<view class="od-stt">感谢您的使用，如有售后问题请联系客服</view>
		</block>
		<!-- 已取消 -->
		<block v-if="progressWidth === 100">
			<view><text class="od-st">订单已取消</text></view>
			<view class="od-stt">期待下次为您服务，如需帮助可咨询客服</view>
		</block>
	</view>
</template>
<script setup>
import { getOrderDetailApi } from '@/api/order'
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'

// 获取传递的参数
const { oid } = defineProps({
	oid: {
		type: String,
		default: '',
	},
})

onLoad(() => getOrderDetail())

// 获取订单详情
const orderDetail = ref({})
const getOrderDetail = async () => {
	await getOrderDetailApi(oid)
	// 没有这个订单 手动写数据
	orderDetail.value = {
		out_trade_no: 'O-cCYKY00171',
		demand: '',
		hospital_id: 5,
		hospital_name: '武汉中心医院',
		price: '0.5',
		receiveAddress: '北京',
		service_code: 'pz3',
		service_id: 4,
		service_name: '就医陪诊（尊享）',
		service_stype: '15',
		starttime: 1703606400000,
		tel: '3',
		order_start_time: 1703646534976,
		transaction_id: '4200002083202312279759044358',
		trade_state: '待服务',
		time_end: 1703646552000,
		uid: '19',
		code_url: 'weixin://wxpay/bizpayurl?pr=RrPBnytzz',
		other: '',
		service_state: '0',
		paidPrice: '0.5',
		area_name: '中部地区',
		service_logo_image_url:
			'http://159.75.169.224/uploads/20231105/90ded71dd1868829b08dae540412c039.jpeg',
		client_name: '张三',
	}
}

// 根据 trade_state 计算出 进度
const progressWidth = computed(() => {
	const map = { 待支付: 25, 待服务: 50, 已完成: 75, 已取消: 100 }
	return map[orderDetail.value.trade_state] || 0
})

// 倒计时结束
const onTimeUp = () => {}
</script>
<style lang="scss">
.od-banner {
	position: relative;
	background: url()
		repeat;
}
.od-banner-icon {
	position: absolute;
	top: 30rpx;
	right: -20rpx;
	width: 130rpx;
	opacity: 0.6;
}
.od-jd {
	padding: 60rpx 40rpx;
}
.od-jd-out {
	height: 20rpx;
	line-height: 20rpx;
	border: 5rpx solid #ffffff;
	border-radius: 50rpx;
	background: #ffffff;
	.od-jd-in {
		height: 20rpx;
		border-radius: 50rpx;
		background: url()
			repeat-y;
	}
}
.my-flex {
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding: 30rpx 30rpx 0;
}
.od-jd-text {
	color: #ffffff;
	font-size: 26rpx;
	opacity: 0.7;
	&.od-jd-text-active {
		opacity: 1;
		font-weight: bold;
	}
}
.order-status {
	position: relative;
	background-color: #fff;
	margin-top: -20rpx;
	border-radius: 20rpx 20rpx 0 0;
	padding: 20rpx;
	text-align: center;
	.od-stt {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.btnp {
		margin: 20rpx 180rpx 0;
	}
}
</style>
